/**
* 作者：zi-yao
* 时间：2023/10/18 10:46:01
* 功能：页面
**/

<template>
<div id="wrap" ref="appRef" class="bg-blue">
    <swiper
        :modules="modules"
        class="w-100% h-100%"
        v-bind="swiperOption"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
    >
        <swiper-slide class="bg-red"> 1 </swiper-slide>
        <swiper-slide class="bg-gray"> 2 </swiper-slide>
        <swiper-slide class="bg-yellow" > 3 </swiper-slide>
    </swiper>

</div>
</template>

<script lang="ts" setup>
import useDraw from '@/utils/useDraw.js'
import {onMounted, onUnmounted} from "vue";
import useWh from '@/hooks/useWh';

// * 适配处理
const { baseWidthPx, baseHeightPx } = useWh();
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
onMounted(() => {
    windowDraw();
    calcRate();
})
onUnmounted(() => {
    unWindowDraw();
})

/**
 * 作者：zi-yao
 * 时间：2023/10/18 14:28:38
 * 功能：轮播图组件
 */

import { Swiper, SwiperSlide} from "swiper/vue";
// 引入swiper样式（按需导入）
import "swiper/css";
import "swiper/css/pagination"; // 轮播图底面的小圆点
import "swiper/css/navigation"; // 轮播图两边的左右箭头
import "swiper/css/scrollbar"; // 轮播图的滚动条
import 'swiper/css/effect-fade';
import 'swiper/css/effect-cube';
import 'swiper/css/effect-cards';

// 引入swiper核心和所需模块
import { Autoplay,Navigation,Pagination, EffectFade, EffectCube, EffectCards  } from "swiper/modules";
// 在modules加入要使用的模块
const modules = [Autoplay, Pagination, Navigation, EffectFade, EffectCube, EffectCards ]

const prevEl = (item, index) => {
    // console.log('上一张' + index + item)
};
const nextEl = () => {
    // console.log('下一张')
};



const onSwiper = (swiper) => {
    console.log(swiper);
};
const onSlideChange = () => {
    console.log('slide change');
};

const swiperOption = {
    spaceBetween: 0,
    slidesPerView: 1, // 一屏显示的slide个数  'auto'
    slidesPerGroup: 1, //每组多少个swiper滑块
    // centeredSlides: true, // 居中的slide是否标记为active，默认是最左active,这样样式即可生效
    // slideToClickedSlide: true, // 点击的slide会居中
    // loop: true, // 循环播放, 可有无限滚动效果，初始加载即是滚动后的效果
    scrollbar: { draggable: true },
    grabCursor: true, //抓手光标
    // autoplay: {
    //   delay: 3000,
    //   disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay
    //   pauseOnMouseEnter: true, //鼠标置于swiper是否时暂停自动切换
    // },
    //使用前进后退按钮来控制Swiper切换。
    navigation: false,   // 1默认，在内
    // 2前进、后退按钮放到容器的外面
    // navigation: {
    //   nextEl: ".swiper-button-next",
    //   prevEl: ".swiper-button-prev",
    //   hiddenClass: "button-hidden", //隐藏时的class
    //   disabledClass: "button-disabled", //不可用时的class
    // },
    effect: "fade",   // slide(默认) | cards | fade | cube
    //使用分页器导航
    pagination: {
      clickable: true,
    },
};


</script>

<style lang="scss" scoped>
#wrap{
    color: #d3d6dd;
    width: v-bind(baseWidthPx);
    height: v-bind(baseHeightPx);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left top;
}
</style>
